<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <link rel="stylesheet" href="../dist/lib/myshare/share.min.css">
  <link rel="stylesheet" href="../dist/lib/videoJs/css/video-js.css">
  <link rel="stylesheet" href="../dist/css/main.css">
</head>
<body class="bg-shadow">
<!-- header start -->
<div class="course-details-header">
  <div class="s-fl">
    <a class="go-back s-fl" href="e-online-detail-catalog.html"></a>
    <div class="h-title s-thide s-fl">领取2019开工开课红红包领取2019开工开课红红包</div>
    <div class="info-bar s-fl">
      <a href="javascript:;" class="js-store-btn" data-id="1" data-store="0"><i class="icon icon-store"></i>收藏</a>
      <a href="javascript:;" class="js-share-btn"><i class="icon icon-share"></i>分享</a>
    </div>
  </div>
  <ul class="nav-list s-fr">
    <li class="list-item"><a href="#">下载APP</a></li>
    <li class="list-item list-item-after">
      <a href="m-news.html" class="user-news active">消息</a>
      <a href="m-online-course.html">个人中心</a>
    </li>
    <li class="list-item item-user">
      <span class="user-name">黑眼圈圈</span>
      <span class="user-head">
        <img src="../dist/images/user_head.png" alt="">
         <span class="user-exit">
            <a href="#" class="link-exit"><i class="icon-exit"></i>退出</a>
          </span>
      </span>
    </li>
  </ul>
</div>
<!-- header start-->

<!-- content start-->
<div class="study-main">
  <!-- 侧边栏 -->
  <div class="course-sidebar-layout">
    <dl>
      <dd class="js-open-chapter">
        <i class="icon icon-chapter"></i>
        <span>章节</span>
      </dd>
      <dd class="js-open-comment">
        <i class="icon icon-comment"></i>
        <span>评论</span>
      </dd>
    </dl>
  </div>
  <div class="course-sidebar-list">
    <div class="course-catalog-item">
      <div class="chapter-head">
        <span class="s-fl s-thide chapter-title">第1章：</span>
        <span class="s-fl s-thide chapter-name">Taro的基本介绍</span>
      </div>
      <div class="section">
        <a href="#" class="section-link">
          <span class="s-fl s-icon s-icon-1" title="正文"></span>
          <span class="s-fl s-thide section-title">第1节：</span>
          <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr">已完成</span>
        </a>
      </div>
      <div class="section">
        <a href="#" class="section-link">
          <span class="s-fl s-icon s-icon-2" title="测试"></span>
          <span class="s-fl s-thide section-title">第1节：</span>
          <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr">已完成</span>
        </a>
      </div>
      <div class="section">
        <a href="javascript:;" class="section-link">
          <span class="s-fl s-icon s-icon-1" title="正文"></span>
          <span class="s-fl s-thide section-title">第2节：</span>
          <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr color-green">正在学习</span>
        </a>
      </div>
      <div class="section">
        <a href="javascript:;" class="section-link">
          <span class="s-fl s-icon s-icon-2" title="测试"></span>
          <span class="s-fl s-thide section-title">第2节：</span>
          <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr color-orange">未完成</span>
        </a>
      </div>
      <div class="section isLocked">
        <a href="javascript:;" class="section-link">
          <span class="s-fl s-icon s-icon-1" title="正文"></span>
          <span class="s-fl s-thide section-title">第3节：</span>
          <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr color-orange"></span>
        </a>
      </div>
      <div class="section isLocked">
        <a href="javascript:;" class="section-link">
          <span class="s-fl s-icon s-icon-2" title="测试"></span>
          <span class="s-fl s-thide section-title">第3节：</span>
          <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr color-orange"></span>
        </a>
      </div>
    </div>
    <div class="course-catalog-item">
      <div class="chapter-head">
        <span class="s-fl s-thide chapter-title">第2章：</span>
        <span class="s-fl s-thide chapter-name">Taro的基本介绍</span>
      </div>
      <div class="section isLocked">
        <a href="javascript:;" class="section-link">
          <span class="s-fl s-icon s-icon-1" title="正文"></span>
          <span class="s-fl s-thide section-title">第1节：</span>
          <span class="s-fl s-thide section-name">（正文）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr color-orange"></span>
        </a>
      </div>
      <div class="section isLocked">
        <a href="javascript:;" class="section-link">
          <span class="s-fl s-icon s-icon-2" title="测试"></span>
          <span class="s-fl s-thide section-title">第1节：</span>
          <span class="s-fl s-thide section-name">（测试）Taro多端框架开篇介绍Taro多端框架开篇介绍</span>
          <span class="s-fl s-thide section-time ">（11:04）</span>
          <span class="s-fr color-orange"></span>
        </a>
      </div>
    </div>
  </div>
  <!-- 视频区域 -->
  <div class="course-video-wrap">
    <!-- 视频 -->
    <video class="video-js course-video-box"
           id="video-box"
           controls
           autoplay
           preload="none"
           data-id="1"
           data-current-time="30"
           data-total-time="180"
           data-finish="0"
           data-setup="{}">
      <source src="../wayne.mp4" type='video/mp4' />
    </video>
    <!-- 下一节 -->
    <div class="tips-section js-section-next layui-hide">
      <div class="section-container">
        <div class="section-name">下一节课程：<span class="name"></span></div>
        <div class="section-next">
          <a class="layui-btn layui-btn-normal layui-btn-radius next-course">下一节</a>
        </div>
        <div class="section-op">
          <a href="javascript:;" class="review-course">重新观看</a>
        </div>
      </div>
    </div>
    <!-- 重载视频 -->
    <div class="tips-section js-section-refresh layui-hide">
      <div class="section-container">
        <div class="section-name">音频加载失败，请刷新重试！</div>
        <div class="section-review">
          <a href="javascript:;" class="refresh-course">重新加载</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 评论 -->
<div class="course-details-comment">
  <div class="ileader-main">
    <div class="comment-title"><strong>评论</strong></div>
    <div class="comment-modular" id="commentApp">
      <!-- 总评论的内容 -->
      <div class="comment-modular-header">
        <div class="s-fl user-avatar"><img src="../dist/images/user_avatar1.png" alt=""></div>
        <div class="comment-publish">
          <div class="cp-box">
            <textarea class="cp-text" v-model="commentModel"></textarea>
          </div>
          <div class="s-tr cp-op">
            <button class="layui-btn layui-btn-radius btn-publish"
                    @click="handlePublishComment">发布</button>
          </div>
        </div>
      </div>
      <!-- 评论细节 -->
      <div class="comment-list" v-if="commentList && commentList.length">
        <comment-item v-for="item in commentList" :key="item.id" :course-id="id" :comment="item"></comment-item>
      </div>
      <!-- 没有内容时提示 -->
      <div class="ileader-task-tips" v-if="!commentList || !commentList.length">
        <i class="layui-icon">&#xe6af;</i>
        什么都没有，快去添加一个评论
      </div>
      <div class="ileader-page pb-20 s-tc" id="comment_page" v-show="commentList && commentList.length"></div>
    </div>
  </div>
</div>
<!-- content end-->

<!-- footer start-->
<div class="footer-warp">
  <div class="footer-nav">
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
    <a href="#">帮助中心</a>
    <a href="javascript:;" class="ewm-link">
      <span>订阅号</span>
      <div class="ewm-box">
        <p>扫描二维码关注<br>iLeader微信服务号</p>
        <img src="../dist/images/ewm.png" alt="">
      </div>
    </a>
  </div>
  <div class="copyright">京ICP证030173号-1   京网文【2013】0934-983号     ©2019Baidu</div>
</div>
<!-- footer end-->

<!-- 评论组件 -->
<script type="text/html" id="commentItem">
  <div class="list-item">
    <div class="s-fl item-avatar" v-if="!isReply">
      <img :src="comment.userImg" alt="">
    </div>
    <div class="item-content">
      <div class="cp-info">
        <a href="javascript:;" class="user-name">{{comment.userName}}：</a>
        <a href="javascript:;" class="user-name"
           v-if="isReply && comment.isReplyReply">
          @{{comment.replyUserName}} &nbsp;
        </a>
        {{comment.content}}
      </div>
      <div class="cp-func">
        <div class="s-fl cp-time">{{comment.commentTime}}</div>
        <div class="s-fr cp-handle">
          <span class="btn-flag" v-if="comment.isTop">置顶</span>
          <a href="javascript:;" class="btn-replay"
             @click="handleReplyBtnClick">回复</a>
          <a href="javascript:;" class="btb-store"
             :class="{'on': comment.isFavorite}"
             @click="handleFavoriteBtnClick">
            <i class="icon icon-store"></i>
            {{comment.isFavorite ? '已收藏' : '收藏'}}
          </a>
          <a href="javascript:;" class="btn-praise"
             :class="{'on': comment.isPraise}"
             @click="handlePraiseBtnClick">
            <i class="icon icon-praise"></i>
            {{comment.praiseCount ? comment.praiseCount : '赞' }}
          </a>
        </div>
        <div class="comment-publish layui-clear" v-if="visibleCommentInput">
          <div class="cp-box">
            <textarea class="cp-text" ref="commentInput" v-model="commentModel"></textarea>
          </div>
          <div class="s-tr cp-op">
            <button class="layui-btn layui-btn-radius btn-publish"
                    @click="handlePublishComment">发布</button>
          </div>
        </div>
      </div>
      <div class="comment-inner-list" v-if="!isReply && (replyList.length || comment.replyCount)">
        <comment-item v-for="(item, index) in replyList" :key="item.id"
                      v-if="replyList"
                      :comment="item"
                      :course-id="courseId"
                      :reply-comment-id="comment.id"
                      :is-reply="true" @reply-reply="handleReplyReply">
        </comment-item>
        <!-- 加载中 -->
        <div class="s-tc" style="padding: 10px 0" v-if="isLoading">
          <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
        </div>
        <!-- 显示更多 -->
        <div class="list-item list-more" v-if="!displayAll && comment.replyCount">
          <div class="item-content">
            <div class="cp-info">
              <a href="javascript:;" class="btn-more" @click="handleShowAllReply">共{{comment.replyCount}}条回复</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<!-- 评论弹窗 -->
<script type="text/html" id="comment_dialog">
  <div class="sign-box">
    <div class="sign-title">我要评论</div>
    <div class="sign-body">
      <div class="comment-dialog-textarea">
        <textarea name="comment" placeholder="分享你的想法.."  class="layui-textarea comment-text" maxlength="300"></textarea>
        <span class="count">0/300</span>
      </div>
      <div class="layui-form-item mt-25">
        <button class="layui-btn layui-btn-normal layui-btn-radius js-btn-comment">发表评论</button>
      </div>
    </div>
  </div>
</script>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/vue.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/lib/videoJs/js/video.js"></script>
<!--videojs禁止拖拽进度条-->
<script src="../dist/lib/videoJs/js/videojs.disableProgress.js"></script>

<script src="../dist/lib/nicescroll/jquery.nicescroll.min.js"></script>
<script src="../dist/lib/myshare/jquery.share.min.js"></script>
<script src="../dist/js/popup_all.js"></script>
<script src="../dist/js/c_course.js"></script>
<script src="../dist/js/c_comment.js"></script>
<script src="../dist/js/c_online_video.js"></script>
</body>
</html>